<template>
	<el-col :span="componentModel.col*6" v-show="visible">
		<el-row>
			<el-col :span="8" class="field-label-div" v-if="!componentModel.noLabel">
				<label class="field-label">{{componentModel.label}}</label>
			</el-col>
			<el-col :span="componentModel.fieldcol">
				<el-upload drag :action="url" :show-file-list="false" :before-upload="beforeUpload" :headers="headers"
					:on-success="onSuccess">
					<img v-if="imageUrl!=''&&imageUrl!=null" :src="imageUrl"
						:style="componentModel.cssStyle">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-col>
		</el-row>
	</el-col>

</template>

<script>
	import constants from '@/utils/constants.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "SelectComponent",
		props: ["componentModel", "scope"],
		data() {
			return {
				url: "",
				imageUrl: "",
				headers: {
					"X-Token": window.localStorage.getItem("token")
				},
				filename:null,
				visible:true
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				this.filename=null;
				var currentId=prop["currentId"];
				if(currentId==undefined ||currentId==null){
					this.imageUrl="";
				}else{
					this.imageUrl=constants.ROOT_URL + "image/getImageByField?model="+this.componentModel.model+"&id="+currentId+"&dataField="+this.componentModel.dataField+"&X-Token="+window.localStorage.getItem("token");
				}	
			},
			beforeUpload() {
				return new Promise((resolve) => {
					this.url = constants.ROOT_URL + "image/upload";
					resolve();
				})
			},
			getValue(){
				if(this.filename==null){
					return undefined;
				}
				return this.filename;
			},
			onSuccess(response) {
				this.filename=response.filename;
				this.imageUrl=constants.ROOT_URL + "image/getImageByFilename?filename="+response.filename+"&X-Token="+window.localStorage.getItem("token");
			}
		},
	}
</script>

<style>
	
</style>
